<style lang="scss">
// 需要修改 twotwo
.xz-echarts-tt {
  height: 400px;
  width: 100%;
}
</style>

<template>
  <!-- // 需要修改 twotwo -->
  <div class="xz-echarts-tt" :id="name"></div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      // 需要修改 twotwo
      name: "xz-ThereTwo"
    };
  },
  created() {
    this.$nextTick(function() {
      // 需要修改 twotwo
      this.drow(this.name);
    });
  },
  methods: {
    drow(id) {
      this.charts = echarts.init(document.getElementById(id));
     this.charts.setOption({
        title: {
          text: "公司利润统计",
          x: "center",
          textStyle: {
            color: "rgb(255, 255, 255)",
            fontSize: 15
          }
        },
        color: [
          "rgb(214, 81, 255)",
          "rgb(255, 212, 0)",
          "#32cd32",
          "#ff6347",
          "#32cd32",
          "#6495ed",
          "#ff69b4",
          "#87cefa",
          "#cd5c5c",
          "rgb(252, 161, 5)",
          "#40e0d0",
          "#1e90ff",
          "#ff6347",
          "#7b68ee",
          "#00fa9a",
          "rgb(255, 212, 0)",
          "#6699FF",
          "#ff6666",
          "#3cb371",
          "#b8860b",
          "#30e0e0"
        ],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["营业额", "成本", "税费", "净利润"],
          x: "center",
          orient: "horizontal",
          y: "bottom",
          textStyle: {
            color: "rgb(255, 255, 255)"
          }
        },
        toolbox: {
          show: false,
          feature: {
            mark: {
              show: false
            },
            dataView: {
              show: false,
              readOnly: true
            },
            magicType: {
              show: false,
              type: ["line", "bar"]
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: ["第一季度", "第二季度", "第三季度", "第四季度"],
            axisLabel: {
              textStyle: {
                color: "rgb(255, 255, 255)"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgb(255, 255, 255)"
              }
            }
          }
        ],
        series: [
          {
            name: "营业额",
            type: "bar",
            data: [4.1, 2.1, 3.9, 4.1]
          },
          {
            name: "成本",
            type: "bar",
            data: [2.1, 4.2, 1.8, 2.4]
          },
          {
            type: "bar",
            name: "税费",
            data: [2, 2, 3, 5]
          },
          {
            type: "bar",
            name: "净利润",
            data: [3, 5, 7, 9]
          }
        ]
      });

    }
  }
};
</script>


